/**
 * Waitting module
 */

import React from 'react';
import { connect } from 'dva';
import persistHelper from '../../utils/persistHelper';

class Waitting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: persistHelper.isReady(),
        };
    }

    componentDidMount() {
        persistHelper.ready(() => {
            this.setState({
                isReady: true,
            });
        });
    }

    render() {
        const { isReady } = this.state;
        const wait = this.props.wait || !isReady;
        const Plat = $._('AR editor plat');
        return (
          <div className="creator-prewait" id="prewait-holder" style={{ display: wait ? 'block' : 'none' }}>
            <nav>
              <img className="nav-brand pull-left" src={`${window.is.CONST.root_path}/image/navBrand.svg`} />
            </nav>
            <div className="prewait-content">

              <div className="loading">
                <div className="bounce bounce1" />
                <div className="bounce bounce2" />
                <div className="bounce bounce3" />
                <div className="bounce bounce3" />
              </div>
              <div className="logos">
                <div>{Plat}</div>
              </div>
              <div className="footers">
                <p>{'Powered by'}<img src={`${window.is.CONST.root_path}/image/idealsee.png`} /></p>
                <p>Copyright &copy; 2016 idealsee all rights reserved</p>
              </div>
            </div>
          </div>
        );
    }
}

const mapStateToProps = ({ loading, editor }) => {
    return {
        wait: loading.global && !editor.selectedPageId,
    };
};

export default connect(mapStateToProps)(Waitting);
